<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>背景图像的初始位置</title>

        <style type="text/css">
            h3 { text-align: center ; }

            .wrapper {
                width: 800px ;
                height: 500px ;
                margin: 30px auto ;
                border: 20px dotted blue ;
                padding: 50px ;
                background-color: #FF0 ;
                background-image: url( liuyifei.jpg );
                background-repeat: no-repeat ;
                background-size: auto 100% ;
            }

            .first { background-origin: border-box ; }

            .second { background-origin: padding-box ; }

            .third { background-origin: content-box ; }

            .fourth { background-origin: content-box ; background-size: cover ; }

        </style>

    </head>
    <body>

        <h3>背景图像的初始位置</h3>

        <p>background-origin 属性规定 background-position 属性相对于什么位置来定位</p>

        <div class="wrapper first">
            落霞与孤鹜齐飞，秋水共长天一色
        </div>

        <div class="wrapper second">
            落霞与孤鹜齐飞，秋水共长天一色
        </div>

        <div class="wrapper third">
            落霞与孤鹜齐飞，秋水共长天一色
        </div>

        <div class="wrapper fourth">
            落霞与孤鹜齐飞，秋水共长天一色
        </div>
        
    </body>
</html>